<template>
  <div class="app-container">
    <div style="width: 100%;">
      <div style="margin-bottom: 4px;">
        <el-button type="primary" size="mini" @click="handleAdd('articleInfo')">新增</el-button>
        <el-button type="danger" size="mini" @click="handleDeleteAll()">删除</el-button>
      </div>
      <el-table ref="multipleTable" :data="infoList" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="消息名称" width="180">
          <template slot-scope="scope">
            {{scope.row.messageName}}
          </template>
        </el-table-column>
        <el-table-column label="消息来源" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.messageFrom}}</span>
          </template>
        </el-table-column>
        <el-table-column label="消息类型" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.messageType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="55">
          <template slot-scope="scope">
            <span>{{scope.row.sort}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否置顶" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.stick==0">否</span>
            <span v-else-if="scope.row.stick==1">是</span>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.counts}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.messageStatus==0">草稿</span>
            <span v-else-if="scope.row.messageStatus==1">已发布</span>
            <span v-else-if="scope.row.messageStatus==2">已下架</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit('articleInfo', scope.$index, scope.row)">编辑</el-button>
            <el-button
              v-if="scope.row.messageStatus!=1"
              size="mini"
              type="primary"
              @click="handlePublish(scope.$index, scope.row, 1)">发布</el-button>
            <el-button
              v-if="scope.row.messageStatus==1"
              size="mini"
              type="danger"
              @click="handlePublish(scope.$index, scope.row, 2)">下架</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 4px;">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :page-size="pageSize"
          :current-page="pageNum"
          :total="pageTotal"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
    <!--内容编辑-->
    <el-dialog :title="dialogFormTitle" :show-close="false" :close-on-press-escape="false"
               :close-on-click-modal="false" :visible.sync="infoVisible">
      <el-form :model="infoForm">
        <el-form-item label="消息名称" :label-width="formLabelWidth">
          <el-input v-model="infoForm.messageName"></el-input>
        </el-form-item>
        <el-form-item label="消息介绍" :label-width="formLabelWidth">
          <el-input v-model="infoForm.messageIntro"></el-input>
        </el-form-item>
        <el-form-item label="消息状态" :label-width="formLabelWidth">
         <!-- <el-input v-model="infoForm.adStatus"></el-input>--><!--0：草稿，1：已发布，2：已下架-->
          <el-select v-model="infoForm.messageStatus" placeholder="请选择">
            <el-option label="草稿" :value="0" :key="0">
              <span style="float: left">草稿</span>
              <span style="float: right; color: #8492a6; font-size: 13px">0</span>
            </el-option>
            <el-option label="已发布" :value="1" :key="1">
              <span style="float: left">已发布</span>
              <span style="float: right; color: #8492a6; font-size: 13px">1</span>
            </el-option>
            <el-option label="已下架" :value="2" :key="2">
              <span style="float: left">已下架</span>
              <span style="float: right; color: #8492a6; font-size: 13px">2</span>
            </el-option>
          </el-select>
          <span>广告状态 ---- 0：草稿，1：已发布，2：已下架</span>
        </el-form-item>
        <el-form-item label="消息来源" :label-width="formLabelWidth">
          <el-input v-model="infoForm.messageFrom"></el-input>
        </el-form-item>
        <el-form-item label="消息类型" :label-width="formLabelWidth">
          <el-input v-model="infoForm.messageType"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="infoForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="是否置顶" :label-width="formLabelWidth">
          <el-select v-model="infoForm.stick" placeholder="请选择">
            <el-option label="否" :value="0" :key="0">
              <span style="float: left">否</span>
              <span style="float: right; color: #8492a6; font-size: 13px">0</span>
            </el-option>
            <el-option label="是" :value="1" :key="1">
              <span style="float: left">是</span>
              <span style="float: right; color: #8492a6; font-size: 13px">1</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="阅读数" :label-width="formLabelWidth">
          <el-input v-model="infoForm.counts"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="infoForm.notes"></el-input>
        </el-form-item>
        <el-form-item label="消息内容" :label-width="formLabelWidth">
          <UE :config=UEconfig ref="UE"></UE>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit('articleInfo')">取 消</el-button>
        <el-button type="primary" @click="submit('articleInfo')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  import { messageApi } from '@/api/message'
  import { parseTime } from '@/utils/index'
  import UE from '@/components/UEdieor/ue.vue'

  export default {
    components: { UE },
    data() {
      return {
        pageNum: 1, // 当前页
        pageSize: 20, // 每页数
        pageTotal: 0, // 总页数
        list: null,
        infoList: null,
        listLoading: true,
        typeVisible: false,
        infoVisible: false,
        dialogFormTitle: '',
        formLabelWidth: '100px',
        form: {},
        infoForm: {},
        codeDisabled: false,
        dialogPermissionVisible: false,
        articleTypeId: '',
        articleTypeName: '',
        treeList: null,
        clickTreeBtn: false,
        UEconfig: {// UEdieor编辑器配置
          // 可以在此处定义工具栏的内容
          // toolbars: [
          //  ['fullscreen', 'undo', 'redo','|','bold', 'italic', 'underline',
          //  '|','superscript','subscript','|', 'insertorderedlist', 'insertunorderedlist',
          //  '|','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify']
          // ],
          autoHeightEnabled: false,
          autoFloatEnabled: true,
          initialContent: '请输入内容', // 初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
          autoClearinitialContent: false, // 是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
          initialFrameWidth: null,
          initialFrameHeight: 450,
          BaseUrl: '',
          UEDITOR_HOME_URL: process.env.UEDITOR_HOME_URL,
          oldForm: {}
        }
      }
    },
    filters: {
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.form = {}
        messageApi.listPage(this.pageSize, this.pageSize, {}).then(response => {
          console.log(response)
          this.infoList = response.list
          setTimeout(() => { this.listLoading = false }, 1000)
          this.infoList = response.list
          this.pageTotal = response.total
          this.pageNum = response.pageNum
        })
      },
      /* 打开新增窗口 */
      handleAdd() {
        this.infoForm = {}
        this.dialogFormTitle = '新增消息内容：' + this.articleTypeName
        this.infoVisible = true
        this.infoForm.articleTypeId = this.articleTypeId
      },
      /* 打开编辑窗口*/
      handleEdit(index, row) {
        this.dialogFormTitle = '消息内容编辑 - ' + this.articleTypeName
        this.editRow = JSON.stringify(row)
        this.infoForm = JSON.parse(this.editRow)
        // this.infoForm = row
        this.infoVisible = true
        this.UEconfig.initialContent = row.content
      },
      handlePublish(index, row, status) {
        row.messageStatus = status
        const msg = status === 1 ? '发布成功' : '下架成功';
        // 编辑
        messageApi.update(row).then(response => {
          this.$message({
            type: 'info',
            message: msg
          })
          this.fetchData()
        })
      },
      handleDeleteAll() {
        this.$confirm('确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const selectedData = this.$refs.multipleTable.selection
          if (selectedData.length <= 0) {
            this.$message({
              type: 'info',
              message: '请选择至少一行数据'
            })
            return
          }
          let ids = ''
          for (let i = 0; i < selectedData.length; i++) {
            ids += selectedData[i].id + ','
          }
          if (ids.length > 0) {
            ids = ids.substring(0, ids.length - 1)
          }
          messageApi.deleted(ids).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.fetchData()
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
      },
      handleDelete(index, row) {
        this.$confirm('确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          messageApi.deleted(row.id + '').then(response => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.fetchData()
          })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
      },
      /* 提交*/
      submit(type) {
        this.infoForm.content = this.$refs.UE.getUEContent() // 获取富文本编辑器的内容
        console.log(this.infoForm)
        if (this.infoForm.id && this.infoForm.id !== '') {
          // 编辑
          messageApi.update(this.infoForm).then(response => {
            this.infoVisible = false
            this.fetchData()
          })
        } else {
          // 新增
          this.infoForm.messageTo = 0
          messageApi.save(this.infoForm).then(response => {
            this.infoVisible = false
            this.fetchData()
          })
        }
      },
      /* 取消 */
      cancelSubmit(type) {
        this.infoVisible = false
      },
      // 时间格式化
      parseTime(time) {
        if (time != null) {
          return parseTime(time, null)
        }
      },
      pageChange(val) {
        this.pageNum = val
        this.fetchData()
      }
    }
  }
</script>

<style scoped>
  .app-container {
    display: flex;
  }
  .custom-tree-node {
    width: 100%;
  }
  .custom-tree-span {
    height: 28px;
    display: inline-block;
    padding-top: 4px;
  }
</style>
